<template>
  <div class="dashboard">
    <!-- 欢迎区 -->
    <div class="welcome-section">
      <h1>控制台</h1>
      <p>欢迎回来，张小明。这里是您的视频生成概览。</p>
      <button class="primary-button">生成新视频</button>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-grid">
      <div v-for="(stat, index) in stats" :key="index" class="stat-card">
        <div class="stat-header">
          <div class="stat-icon" :style="{ color: stat.color }">{{ stat.icon }}</div>
          <div class="stat-label">{{ stat.label }}</div>
        </div>
        <div class="stat-value">{{ stat.value }}</div>
        <div class="stat-change">
          <span :class="['change-indicator', stat.change.startsWith('+') ? 'positive' : 'negative']">
            {{ stat.change }}
          </span>
          <span class="period">{{ stat.period }}</span>
        </div>
      </div>
    </div>

    <!-- 趋势和活动 -->
    <div class="content-row">
      <div class="chart-section">
        <div class="section-header">
          <h2>视频生成趋势</h2>
          <div class="time-filter">
            <button class="filter-btn active">周</button>
            <button class="filter-btn">月</button>
            <button class="filter-btn">年</button>
          </div>
        </div>
        <div class="chart-placeholder">
          <div class="chart-message">图表数据加载中...</div>
        </div>
      </div>

      <div class="activities-section">
        <div class="section-header">
          <h2>最近活动</h2>
        </div>
        <div class="activity-list">
          <div v-for="(activity, index) in recentActivities" :key="index" class="activity-item">
            <div class="activity-icon" :class="`status-${activity.type}`">
              <span v-if="activity.type === 'success'">✓</span>
              <span v-else-if="activity.type === 'processing'">↻</span>
              <span v-else-if="activity.type === 'error'">×</span>
              <span v-else-if="activity.type === 'download'">↓</span>
            </div>
            <div class="activity-content">
              <div class="activity-title">{{ activity.title }}</div>
              <div class="activity-description">{{ activity.description }}</div>
              <div class="activity-time">{{ activity.time }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 统计数据
const stats = [
  { label: '总生成视频', value: '42', change: '+12%', period: '较上月', icon: '日', color: '#667eea' },
  { label: '已成视频', value: '36', change: '+8%', period: '较上月', icon: '✓', color: '#48bb78' },
  { label: '处理中视频', value: '6', change: '0', period: '2个即将完成', icon: '↻', color: '#f59e0b' },
  { label: '总观看次数', value: '1.2k', change: '+23%', period: '较上月', icon: '👁️', color: '#a0aec0' }
];

// 最近活动数据
const recentActivities = [
  { type: 'success', title: '视频生成成功', description: '产品介绍视频已完成', time: '10分钟前' },
  { type: 'processing', title: '视频生成中', description: '营销推广视频处理中', time: '30分钟前' },
  { type: 'error', title: '视频生成失败', description: '春夏穿搭视频生成失败', time: '2小时前' },
  { type: 'download', title: '视频下载', description: '下载了产品演示视频', time: '4小时前' }
];
</script>

<style scoped lang="scss">
.dashboard {
  .welcome-section {
    margin-bottom: 2rem;

    h1 {
      font-size: 1.8rem;
      margin-bottom: 0.5rem;
      color: #ffffff;
    }

    p {
      color: #b0bec5;
      margin-bottom: 1rem;
    }

    .primary-button {
      background-color: #667eea;
      color: white;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.9rem;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: #5a6fd8;
      }
    }
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;

    .stat-card {
      background-color: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      padding: 1rem;
      border: 1px solid rgba(255, 255, 255, 0.1);

      .stat-header {
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;

        .stat-icon {
          font-size: 1.2rem;
          margin-right: 0.5rem;
        }

        .stat-label {
          font-size: 0.8rem;
          color: #b0bec5;
        }
      }

      .stat-value {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
        color: #ffffff;
      }

      .stat-change {
        display: flex;
        align-items: center;
        font-size: 0.8rem;

        .change-indicator {
          margin-right: 0.5rem;

          &.positive {
            color: #48bb78;
          }

          &.negative {
            color: #f56565;
          }
        }

        .period {
          color: #b0bec5;
        }
      }
    }
  }

  .content-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
  }

  .chart-section,
  .activities-section {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;

      h2 {
        font-size: 1.2rem;
        color: #ffffff;
      }
    }
  }

  .time-filter {
    display: flex;
    gap: 0.5rem;

    .filter-btn {
      padding: 0.25rem 0.5rem;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background-color: transparent;
      color: #b0bec5;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background-color: rgba(255, 255, 255, 0.05);
      }

      &.active {
        background-color: #667eea;
        color: white;
        border-color: #667eea;
      }
    }
  }

  .chart-placeholder {
    height: 200px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b0bec5;

    .chart-message {
      font-size: 0.9rem;
    }
  }

  .activity-list {
    .activity-item {
      display: flex;
      margin-bottom: 1rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
      }

      .activity-icon {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1rem;

        &.status-success {
          background-color: #48bb78;
          color: white;
        }

        &.status-processing {
          background-color: #f59e0b;
          color: white;
        }

        &.status-error {
          background-color: #f56565;
          color: white;
        }

        &.status-download {
          background-color: #667eea;
          color: white;
        }
      }

      .activity-content {
        flex: 1;

        .activity-title {
          font-size: 0.9rem;
          margin-bottom: 0.25rem;
          color: #ffffff;
        }

        .activity-description {
          font-size: 0.8rem;
          color: #b0bec5;
          margin-bottom: 0.25rem;
        }

        .activity-time {
          font-size: 0.7rem;
          color: #b0bec5;
        }
      }
    }
  }

  .light-mode & {
    .welcome-section {
      h1 {
        color: #333333;
      }

      p {
        color: #6c757d;
      }

      .primary-button {
        background-color: #667eea;
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        cursor: pointer;
        font-size: 0.9rem;
        transition: background-color 0.3s ease;

        &:hover {
          background-color: #5a6fd8;
        }
      }
    }

    .stats-grid {
      .stat-card {
        background-color: #ffffff;
        border: 1px solid #e9ecef;

        .stat-header {
          .stat-icon {
            color: #667eea;
          }

          .stat-label {
            color: #6c757d;
          }
        }

        .stat-value {
          color: #333333;
        }

        .stat-change {
          .change-indicator {
            &.positive {
              color: #48bb78;
            }

            &.negative {
              color: #f56565;
            }
          }

          .period {
            color: #6c757d;
          }
        }
      }
    }

    .content-row {
      .chart-section,
      .activities-section {
        background-color: #ffffff;
        border: 1px solid #e9ecef;
      }

      .section-header {
        h2 {
          color: #333333;
        }
      }

      .time-filter {
        .filter-btn {
          color: #6c757d;

          &.active {
            background-color: #667eea;
            color: white;
            border-color: #667eea;
          }
        }
      }

      .chart-placeholder {
        background-color: #f8f9fa;
        color: #6c757d;
      }

      .activity-list {
        .activity-item {
          .activity-icon {
            &.status-success {
              background-color: #48bb78;
              color: white;
            }

            &.status-processing {
              background-color: #f59e0b;
              color: white;
            }

            &.status-error {
              background-color: #f56565;
              color: white;
            }

            &.status-download {
              background-color: #667eea;
              color: white;
            }
          }

          .activity-content {
            .activity-title {
              color: #333333;
            }

            .activity-description {
              color: #6c757d;
            }

            .activity-time {
              color: #6c757d;
            }
          }
        }
      }
    }
  }
}
</style>
